<template>
  <div class="dynamic-comp">
    <DraggableResizable
      :x="20"
      :y="20"
      :w="150"
      :h="150"
      :z="1"
      :parent="true"
      :active="false"
      :draggable="draggable"
      :resizable="resizable"
      :lock-aspect-ratio="false"
      :isConflictCheck="false"
      :snap="true"
      :snapTolerance="5"
      @refLineParams="getRefLineParams"
      @activated="onActivated"
      @deactivated="onDeactivated"
      @resizing="onResizing"
      @dragging="onDragging"
    >
      <div @dblclick="containerDblclick" style="width: 100%;height: 100%;position: relative;">
        <DraggableResizable
          ref="DraggableChild"
          :x="10"
          :y="10"
          :w="50"
          :h="50"
          :z="1"
          :parent="true"
          :active="true"
          :draggable="true"
          :resizable="true"
          :lock-aspect-ratio="false"
          :isConflictCheck="false"
          :snap="true"
          :snapTolerance="5"
        >
          <div style="width: 100%;height: 100%;background-color: red;"></div>
        </DraggableResizable>
      </div>
    </DraggableResizable>
    <!--辅助线-->
    <span class="ref-line v-line"
      v-for="item in vLine"
      v-show="item.display"
      :key="item.id"
      :style="{ left: item.position, top: item.origin, height: item.lineLength}"
    />
    <span class="ref-line h-line"
      v-for="item in hLine"
      v-show="item.display"
      :key="item.id"
      :style="{ top: item.position, left: item.origin, width: item.lineLength}"
    />
  </div>
</template>
<script>
import DraggableResizable from '@/components/PageGenerate/lib/draggableResizable/dr.vue'
import '@/components/PageGenerate/lib/draggableResizable/dr.css'
export default {
  data() {
    return {
      vLine: [],
      hLine: [],
      draggable: true,
      resizable: true
    }
  },
  components: { DraggableResizable },
  methods:{
    containerDblclick() {
      this.draggable = false
      this.resizable = false
      this.$refs.DraggableChild.checkParentSize()
    },
    onActivated() {
      console.log('onActivated')
    },
    onDeactivated() {
      console.log('deactivated')
    },
    onResizing(x, y) {
      console.log(x, y)
    },
    onDragging(x, y) {
      console.log(x, y)
    },
    btnClick(event) {
      console.log(event, '点击了按钮')
    },
    // 辅助线回调事件
    getRefLineParams (params) {
      const { vLine, hLine } = params
      let id = 0
      this.vLine = vLine.map(item => {
        item['id'] = ++id
        return item
      })
      this.hLine = hLine.map(item => {
        item['id'] = ++id
        return item
      })
    }
  },
}
</script>
<style scoped>
.dynamic-comp {
  width: 100%;
  height: 100%;
  position: relative;
}
</style>
